<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>购物车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    
    <link rel="stylesheet" type="text/css" href="css/tiaozhuan.css"/>
    
	<style>
		.product{
    		display:flex;
    		align-items: center;
   			justify-content: center;
    		font-size:12px;
		}
		.priceAndCountDiv{
    		display:flex;
    		justify-content: space-between;
		}
		.titleDiv{
    		margin-top:-.5rem;
    		margin-bottom:1.2rem;
		}
		.product{
    		opacity: 1;
    		transition: all 0.2s;
		}
		.product>*{
    		margin:.2rem;
		}
		.pay{
			position: absolute;
			right: 0;
			bottom: 2.4rem;
		}
		#allPrice{
			padding: .5rem;
		}
		#payNow{
			background: orangered;
			color: white;
			padding: .4rem 1rem;
		}
		.bot{
			height: 2.6rem;
		}
		#huan1{
					width: 1.3rem;
				}
				#huan2{
					width: 1.3rem;
				}
				#huan3{
					width: 1.3rem;
				}
				#huan4{
					width: 1.3rem;
					}
				.bot div{
					margin-left: 1.2rem;
					margin-right:1rem ;
				}
				p {
   					margin: -.4em 0;
    				font-size: 14px;
				}
				#emptyCar h4{
					margin-top: 30px;
				}
				#emptyCar p{
					margin-top: 10px;
					margin-bottom: 10px;
				}
	</style>
	</head>
	<body>
		
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <h1 class="title" id="shopCarCount">购物车</h1>
        </header>
        <!-- 你的html代码 -->
        
        <!-- class="content" 可以出现滚动条 -->
    <div class="content">

        <div id="quanxuan"> <img width="20" id="allSelectImg" src="" style="vertical-align: middle" /> 全选</div>
        
        <div id="shopCarDiv">
        </div>


        <div id="emptyCar" style="display:none;text-align: center;vertical-align: middle;">
            <h4>购物车快饿扁啦</h4>
            <p style="font-size: 12px;">主人快给我点宝贝吧</p>
            <p style="border: 1px solid #CCCCCC; padding: 2px 4px;text-decoration: none;width: 100px;margin: 0 auto;width: 400;"><a href="index.html">逛一逛</a></p>
        </div>
        
        <div class="paybox">
            <div class="pay" >
                <div id="allPrice" class="fl"></div>
                <div class="fl payNow" id="payNow">去结算</div>
            </div>
        </div>
        
    </div>
    
    <div class="bot">
				<div class="icon1" onclick="icon1()">
						<img src="https://s2.mogucdn.com/p2/170315/40592144_5a62k5aecifecf3iaddc0eb2l384b_44x44.png"  id="huan1"/> 
					<p>首页</p>
				</div>
				<div class="icon2" onclick="icon2()">
						<img src="https://s2.mogucdn.com/p2/170315/40592144_0b8i11l822b0adfjaaifl11ig86f1_44x44.png"  id="huan2"/> 
					<p >分类</p>
				</div>
				<div class="icon3" onclick="icon3()">
						<img src="https://s2.mogucdn.com/p2/170315/40592144_67ja8jj102089fj6djai0l6khb0h5_44x44.png"  id="huan3"/> 
					<p style="color: #FF5777;">购物车</p>
				</div>
				<div class="icon4" onclick="icon4()">
						<img src="https://s2.mogucdn.com/p2/170315/40592144_35ikl8db8a4lfa3f29k8k4b9k3ji2_44x44.png"  id="huan4"/> 
					<p>我的</p>
				</div>
	</div>

</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

<script src="js/cart.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/tiaozhuan.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>